<template>
  <view class="container">
    <view class="header">
      <view class="header_title">
        <view class="header-text">
          <view class="header-text-title">{{ $t('generate.aiModel') }}</view>
          <view class="header-text-desc">{{ $t('generate.aiGenerateDesc') }}</view>
        </view>
      </view>
    </view>
    <view class="content">
      <view class="example_box">
        <!-- <image src="../../static/exmple.gif" mode=""></image> -->
        <view class="example-text">{{ $t('generate.exampleDisplay') }}</view>
      </view>
      <view class="image_card">
        <view class="content_box" v-for="item in exampleList" :key="item.id">
          <view @tap="openPreview(item)">
            <image :src="item.imgUrl" mode=""></image>
            <view class="product">
              <text style="color: #707070">{{ item.name }}</text>
              <!-- <text style="color: #cf0000;">￥{{item.price}}</text> -->
            </view>
          </view>
        </view>
      </view>
      <view class="generate_box">
        <view class="generate_int">
          <textarea
            v-model="keyword"
            placeholder-style="margin:0rpx"
            :placeholder="$t('generate.inputPrompt')"
          />
        </view>
        <view class="button_box" @tap="handleGenerate">
          {{ $t('generate.aiGenerate') }}
        </view>
      </view>
    </view>
    <!-- 	<view class="container">
		<view class="example">
			<uni-card spacing="0">
				<button type="primary" class="example_but" style="">效果示例</button>
				<view class="example_box">
					<view class="example_img" v-for="(item, index) in exampleList" :key="item.id"
						v-if="exampleCurrent==0">
						<uni-card id="example_card" padding="0" spacing="0" margin="0" style="width: 100%;height: 100%;"
							@tap="openPreview(item)">
							<image :src="item.imgUrl" mode="" style="width: 100%;height: 105px;"></image>
							<view class="" style="height: 40rpx;width: 100%;line-height: 20rpx;">
								<text style="font-weight: bold;">{{item.name}}</text>
							</view>
						</uni-card>
					</view>
				</view>
				<view class="example_photo" v-if="exampleCurrent==1">
					<view class="photo_box" v-for="(item,index) in photoList" :key="item.id">
						<uni-card padding="0" spacing="0" margin="0" style="width: 20%;height: 100%;">
							<image :src="item.uploadImg" mode="" style="width: 100%;height: 200rpx;"></image>
							<view class="" style="height: 40rpx;width: 100%;line-height: 20rpx;text-align: center;">
								<text style="font-weight: bold;">{{item.uploadName}}</text>
							</view>
						</uni-card>

						<view class="" style="width: 25%;height: 240rpx;line-height: 240rpx;text-align: center;">
							<uni-icons type="arrow-right" size="30"></uni-icons>
						</view>
						<uni-card padding="0" spacing="0" margin="0" style="width: 20%;height: 100%;">
							<image :src="item.effect" mode="" style="width: 100%;height: 200rpx;"></image>
							<view class="" style="height: 40rpx;width: 100%;line-height: 20rpx;text-align: center;">
								<text style="font-weight: bold;">生成效果</text>
							</view>
						</uni-card>

					</view>
				</view>
			</uni-card>
		</view>
		<view class="generate_box">
			<uni-card padding="0" spacing="0">
				<view class="" style="display: flex;width: 100%;height: 80rpx;">
					<view class="left_box" @click="handleCurrent(0)">
						<view class="word l_word">文字生成</view>
						<view class="l_top"></view>
						<view class="l_center"></view>
						<view class="l_bottom"></view>
					</view>
					<view class="right_box" @click="handleCurrent(1)">
						<view class="word r_word">照片生成</view>
						<view class="r_top"></view>
						<view class="r_center"></view>
						<view class="r_bottom"></view>
					</view>
					<button class="" style="width: 50%;" @click="handleCurrent(0)">文字生成</button>
					<button class="" style="width: 50%;background-color: #BFACFE;"
						@click="handleCurrent(1)">照片生成</button>
				</view>
				<view class="" style="width: 80%;height: 100%;margin-left: 8%;margin-top: 50rpx;"
					v-if="exampleCurrent==0">
					<textarea v-model="keyword" placeholder-style="margin:0rpx" placeholder="请输入一段描述来生成模型,比如:长翅膀的狗" />
				</view>
				<view class="generate_text" v-if="exampleCurrent==1">
					<view class="generate_photo" style="width: 100%;">
						<view class="" style="width: 25%;">
							<uni-file-picker v-model="value" file-mediatype="all" limit="1">
								<button type="primary" class="uploadBtn" size="mini">上传人物照片</button>
							</uni-file-picker>
						</view>
						<view class="" style="width: 25%;">
							<uni-file-picker v-model="value" file-mediatype="all" limit="1">
								<button type="primary" class="uploadBtn" size="mini">上传动物照片</button>
							</uni-file-picker>
						</view>
						<view class="" style="width: 25%;">
							<uni-file-picker v-model="value" file-mediatype="all" limit="1">
								<button type="primary" class="uploadBtn" style="" size="mini">上传动漫照片</button>
							</uni-file-picker>
						</view>
					</view>
					<view class="upload_Tips">
						<text>1.请上传高清图片</text>
						<text>2.请确保图片背景为纯色</text>
						<text>3.图片主体居中</text>
					</view>
				</view>
				<button type="primary" style="width: 80%;margin: 20rpx auto;" @tap="handleGenerate">一键生成</button>
			</uni-card>
		</view>
	</view> -->
    <su-popup :show="prviewShow" type="center" background-color="#fff" @close="closeDialog">
      <view class="popup-content">
        <image :src="priviewSrc"></image>
        <button
          style="width: 100%; margin: 20rpx auto; background-color: #f9e056"
          @tap="startPrint(priviewSrc)"
          >{{ $t('generate.startPrint') }}</button
        >
      </view>
    </su-popup>
    <su-popup :show="iskeyWord" type="center" @close="closeKeyWord">
      <view class="uni-dialog-title">
        <text class="uni-dialog-title-text uni-popup__warn">
          {{ $t('generate.emptyPromptWarning') }}
        </text>
      </view>
    </su-popup>
    <su-popup :show="progressShow" type="center" background-color="" @close="closeProgressDialog">
      <view class="progress_content">
        <progressLine :pgList="progressData"></progressLine>
        <!-- <progress :percent="progressData.num" :duration="progressData.duration" activeColor="#f9e056"
					active="true" show-info stroke-width="20" /> -->
      </view>
    </su-popup>
  </view>
</template>

<script>
  import sheep from '@/sheep';
  import progressLine from './components/progress.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import GenerateApi from '@/sheep/api/generate/aiGenerate';
  import { t } from '@/i18n/solveSetup';

  export default {
    components: {
      progressLine,
    },
    data() {
      return {
        exampleCurrent: 0,
        prviewShow: false,
        iskeyWord: false,
        progressShow: false,
        priviewSrc: '',
        priviewName: '',
        keyword: '',
        exampleList: [],
        photoList: [],
        progressData: {
          num: 100,
          duration: 75,
        },
      };
    },
    onLoad() {
      this.getImgShows();
    },
    methods: {
      async getImgShows() {
        const { data } = await GenerateApi.getEffectShow();
        this.exampleList = data;
        console.log(data, '998');
      },
      handleCurrent(val) {
        this.exampleCurrent = val;
      },
      openPreview(data) {
        this.prviewShow = true;
        this.priviewSrc = data.imgUrl;
        this.priviewName = data.name;
      },
      closeDialog() {
        this.$emit('close');
        this.prviewShow = false;
        // if (this.beforeClose) return;
      },
      async handleGenerate() {
        if (this.keyword == '') {
          this.iskeyWord = true;
        } else {
          this.progressShow = true;
          const { code, data } = await GenerateApi.getWordGenerate({
            keyword: this.keyword,
          });
          if (code == 0) {
            this.progressShow = false;
            // this.exampleList = data.images;
            // this.priviewSrc = data.images[0];
            uni.setStorageSync('imgList', data.images);
            uni.setStorageSync('printName', this.keyword);
            uni.setStorageSync('printType', 'aiGenerate');
            sheep.$router.go('/pages/generate/model');
          } else {
            this.progressShow = false;
          }
        }
      },
      closeKeyWord() {
        this.$emit('close');
        this.iskeyWord = false;
      },
      closeProgressDialog() {
        this.$emit('close');
        this.progressShow = false;
      },
      async startPrint(val) {
        let src = await this.base64(val);
        let printSrc = src.split('base64,')[1];
        uni.setStorageSync('printSrc', printSrc);
        uni.setStorageSync('printName', this.priviewName);
        sheep.$router.go('/pages/generate/print');
      },

      base64(url) {
        return new Promise((resolve) => {
          const image = new Image();
          // 先设置图片跨域属性
          image.crossOrigin = 'Anonymous';
          // 再给image赋值src属性，先后顺序不能颠倒
          image.src = url;
          image.onload = function () {
            const canvas = document.createElement('CANVAS');
            // 设置canvas宽高等于图片实际宽高
            canvas.width = image.width;
            canvas.height = image.height;
            canvas.getContext('2d').drawImage(image, 0, 0);
            // toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）
            const dataURL = canvas.toDataURL('image/png');
            resolve(dataURL);
          };
          image.onerror = () => {
            resolve({
              message: t('generate.photoProcessFailed'),
            });
          };
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .header {
    width: 100%;
    height: 130px;
    background-image: url('../../static/header.gif');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;

    .header_title {
      width: 90%;
      height: 85px;
      background-image: url('../../static/ai_draw_bg2.png');
      border-radius: 15px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      .header-text {
        padding: 20px;
        padding-top: 24px;
        box-sizing: border-box;
        .header-text-title {
          font-size: 20px;
          font-weight: bold;
        }
        .header-text-desc {
          font-size: 14px;
          margin-top: 3px;
        }
      }
    }
  }

  .content {
    flex: 1;
    overflow-y: auto;
  }

  .example_box {
    width: 90%;
    margin: 5px auto;

    .example-text {
      width: 100%;
      height: 56px;
      position: relative;
      z-index: 10;
      background-image: url('../../static/example_bg.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      display: flex;
      align-items: center;
      padding-left: 20px;
      box-sizing: border-box;
      font-weight: bold;
    }
  }

  .image_card {
    width: 90%;
    // height: 360rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    // flex-wrap: wrap;
    background-color: #fff;
    border-radius: 15px;
    margin: -40px auto;
    padding: 40px 10px 10px 10px;

    .content_box {
      background-color: #f3f3f3;
      border-radius: 20rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      padding: 0rpx 0rpx;

      image {
        width: 25vw;
        height: 25vw;
        border-radius: 20rpx;
      }

      .product {
        display: flex;
        justify-content: center;
        font-size: 28rpx;
        // height:25px;
        // line-height: 25px;
        overflow: hidden;
        padding: 10rpx 0;
      }
    }
  }

  .generate_box {
    width: 90%;
    height: 400px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    margin: 60px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;

    .generate_int {
      width: 90%;
      box-sizing: border-box;
      height: 150px;
      padding: 10px;
      border-radius: 10px;
      background-color: #f3f3f3;
      textarea {
        height: 100%;
        width: 100%;
      }
    }

    .button_box {
      width: 80%;
      height: 80px;
      margin-top: 25px;
      background-color: #f9e056;
      border-radius: 20px;
      color: #83320d;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      line-height: 80px;
      letter-spacing: 6rpx;
    }
  }

  // .container {
  // 	width: 100%;
  // 	height: 100%;
  // 	padding-bottom: 50rpx;
  // 	padding-top: 30rpx;
  // 	font-size: 14px;
  // }
  // .example {
  // 	position: relative;
  // }

  // .example_box {
  // 	margin-top: 120rpx;
  // 	display: flex;
  // 	flex-wrap: wrap;
  // 	margin-bottom: 20rpx;
  // }

  .example_img {
    width: 30%;
    margin: 20rpx 10rpx;
  }

  .example_but {
    position: absolute;
    left: -8rpx;
    top: 0;
    width: 200rpx;
    border-radius: 20rpx;
  }

  .example_photo {
    padding: 0 20rpx;
  }

  .photo_box {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;
  }

  .generate_text {
    width: 90%;
    height: 300rpx;
    margin-left: 5%;
    background-color: #ccc;
    border-radius: 10rpx;
    margin-top: 50rpx;
  }

  .generate_photo {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-top: 15rpx;
  }

  .uploadBtn {
    font-size: 24rpx;
    padding: 0 5rpx;
  }

  .upload_Tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 25rpx;
  }

  .left_box {
    background-color: blueviolet;
  }

  .right_box {
    background-color: #ffffff;
  }

  .left_box {
    flex: 1;
    position: relative;
    margin-left: -6rpx;
  }

  .right_box {
    flex: 1;
    position: relative;
  }

  .left_box uni-view {
    background-color: #ffffff;
    height: 42rpx;
  }

  .right_box uni-view {
    background-color: blueviolet;
  }

  .left_box uni-view {
    height: 40rpx;
  }

  .right_box uni-view {
    height: 40rpx;
  }

  .l_top {
    border-top-right-radius: 40rpx;
  }

  .r_bottom {
    border-bottom-left-radius: 40rpx;
  }

  .word {
    position: absolute;
    width: 100%;
    height: 100% !important;
    /* background-color: transparent !important; */
    /* 恢复照片生成时放开这个属性 */
    text-align: center;
    line-height: 120rpx;
    font-size: 48rpx;
  }

  .l_word {
    color: #000;
  }

  .r_word {
    color: #fff;
  }

  .l_center {
    margin-top: -2rpx;
    margin-bottom: -2rpx;
  }

  .r_center {
    margin-top: -2rpx;
    margin-bottom: -2rpx;
  }

  .popup-content {
    // width:100%;
    // height: 960rpx;
    padding: 40rpx;

    image {
      width: 512rpx;
      height: 512rpx;
    }
  }

  .progress_content {
    width: calc(100vw - 160rpx);
    height: 100rpx;
    margin: 0 auto;
    // padding: 20px;
  }

  .uni-dialog-title {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    border-radius: 20rpx;
    flex-direction: row;
    justify-content: center;
    padding: 40rpx; // padding-top: 25px;
  }

  .uni-dialog-title-text {
    font-size: 32rpx;
    font-weight: 500;
    color: #83320d;
  }

  :deep(#example_card) {
    border-radius: 30rpx;
  }

  :deep(#example_card .uni-card__content) {
    width: 100%;
    height: 100%;
    text-align: center;
  }

  :deep(.uni-textarea-wrapper) {
    // width: 100%;
    background-color: #f3f3f3;
    color: #666;
    // border-radius: 10px;
    // padding: 10px;
    /* margin: 20rpx 0; */
  }

  :deep(uni-textarea) {
    height: 100%;
  }

  :deep(#arrow .uni-card__content) {
    height: 100%;
    line-height: 240rpx;
    text-align: center;
  }

  :deep(#arrow) {
    box-shadow: none;
  }

  :deep(#arrow) {
    border: none;
  }
</style>
